<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="First Name" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="firstName">
              <a-input v-model="model.firstName" @change="handFirstNameChange" placeholder=""  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="Last Name" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lastName">
              <a-input v-model="model.lastName" @change="handLastNameChange" placeholder=""  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="Email" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
              <a-input v-model="model.email" placeholder=""  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="Phone" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
                  <a-form-model-item style="margin-bottom:0;"  prop="phonePrefix">
                      <a-input-group compact>
                        <a-input style="width: 30%"   :max-length="3" @change="onPhonePrefixChange" v-model="model.phonePrefix"  />
                        <a-input style="width: 70%"  :max-length="7"  ref="stPhone" v-model="model.phone"/>
                      </a-input-group>
                  </a-form-model-item>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="Address" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <a-input v-model="model.address" @change="handAddressChange" placeholder=""  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'TeacherInfoForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           firstName: [
              { required: true, message: 'Please enter a first name!'},
           ],
          lastName: [
            { required: true, message: 'Please enter a last name!'},
          ],
           email: [
             {required: true, message: 'Please enter email address!'},
             { pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: 'Please enter the correct email!'},
           ],
           phone: [
             { required: true, message: 'Please enter your phone number!'},
             { pattern: new RegExp(/^[0-9]\d*$/, "g"),message: 'Please key in numbers!'},
             { min: 7, message: 'The phone number is at least 7 digits',}
           ],
          phonePrefix: [
              {
                required: true, message: ''
              },
              {
                pattern: new RegExp(/^[0-9]\d*$/, "g"),message: 'Please key in numbers!'
              },
              {
                min: 3,
                message: 'The prefix number is at least 3 digits',
              }
          ],
           address: [
              { required: true, message: 'Please enter the address!'},
           ],
        },
        url: {
          add: "/sistersophie/teacherInfo/add",
          edit: "/sistersophie/teacherInfo/edit",
          queryById: "/sistersophie/teacherInfo/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      onPhonePrefixChange(){
        let val = this.model.phonePrefix;
        if(!val) return '';
        let len = val.length;
        console.info('len ' + len);
        if(len == 3){
          this.$refs.stPhone.focus()
        }
      },
      handAddressChange(e){
        let val = this.model.address;
        if(!val) return '';
        val = val.toString()
        let srcValArray = val.split(' ') //按照空格分割;
        this.model.address = this.commonChangeValToUpper(srcValArray);
      },
      handFirstNameChange(e){
        let val = this.model.firstName;
        if(!val) return '';
        val = val.toString()
        let srcValArray = val.split(' ') //按照空格分割;
        this.model.firstName = this.commonChangeValToUpper(srcValArray);
      },
      handLastNameChange(e){
        let val = this.model.lastName;
        if(!val) return '';
        val = val.toString()
        let srcValArray = val.split(' ') //按照空格分割;
        this.model.lastName = this.commonChangeValToUpper(srcValArray);
      },
      commonChangeValToUpper(srcValArray){
        let temp = '';
        for(let i=0;i<srcValArray.length;i++){
          if(i == 0){
            temp = temp + this.upperVal(srcValArray[i])
          }else {
            temp = temp + ' ' + this.upperVal(srcValArray[i]);
          }
        }
        return temp;
      },
      upperVal (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>